<template>
	<div class="payment-container">
		<!-- 顶部切换按钮 -->
		<div class="tab-bar">
			<div class="tab-item" :class="{ 'active': activeTab === 'bank' }" @click="switchTab('bank')">
				储蓄卡支付
			</div>
			<div class="tab-item" :class="{ 'active': activeTab === 'credit' }" @click="switchTab('credit')">
				信用卡支付
			</div>
		</div>

		<!-- 银行卡支付表单 -->
		<div class="payment-form">
			<div class="form-item">
				<label>姓名</label>
				<input placeholder-class="textColor" type="text" v-model="cardHolderName" placeholder="持卡人姓名" />
			</div>
			<div class="form-item">
				<label>身份证号</label>
				<input placeholder-class="textColor" type="text" v-model="idCardNumber" placeholder="持卡人身份证号"
					maxlength="18" />
			</div>
			<div class="form-item">
				<label>卡号</label>
				<input placeholder-class="textColor" type="text" v-model="bankCardNumber" placeholder="用于收款的银行卡"
					maxlength="19" />
			</div>
			<div class="form-item">
				<label>手机号</label>
				<input placeholder-class="textColor" type="tel" v-model="phoneNumber" placeholder="银行预留手机号"
					maxlength="11" />
			</div>

			<div class="form-item-column" v-if="activeTab === 'credit'">
				<div class="col">
					<label>有效期</label>
					<input placeholder-class="textColor" type="text" v-model="expiryYear" placeholder="年份末两位"
						maxlength="2" />-
					<input placeholder-class="textColor" type="text" v-model="expiryMonth" placeholder="月份MM"
						maxlength="2" />
				</div>
				<div class="col">
					<label>安全码</label>
					<input style="width: 72%;" placeholder-class="textColor" type="text" v-model="cvv" placeholder="CVV"
						maxlength="6" />
				</div>
			</div>

			<button :disabled="this.disabled" class="submit-btn" @click="firstPayment">确认支付</button>
		</div>

		<h5 class="hint">
			<p>支持的银行：</p>
			<p>北京银行、广发银行、交通银行、民生银行、平安银行、浦发银行、华夏银行、上海银行、工商银行、光大银行、建设银行、中国银行、邮储银行、中信银行、招商银行（不支持借记卡）。</p>
			<p style="font-weight: 550;">不支持的银行：兴业银行、农业银行。</p>
		</h5>

		<!-- 获取短信验证码弹窗 -->
		<u-popup :show="smsPopup" @open="open" @close="close">
			<view class="pop">
				<view class="title Row">
					<u-icon name="arrow-left" color="#1a1a1a" size="26" @click="close"></u-icon>
					<view class="">请输入支付短信验证码</view>
					<u-icon name="arrow-left" color="#fff" size="26"></u-icon>
				</view>

				<view class="pop_input">
					<input placeholder-class="validateCode" type="number" v-model="validateCode" placeholder="短信验证码" />
				</view>

				<view class="tip">短信验证码已发送</view>

				<view class="sure" @click="confirmPayment()">确认付款</view>
			</view>
		</u-popup>
	</div>
</template>

<script>
	import {
		postMenu,
		getMenu
	} from '@/utils/api.js';
	import {
		showLoading,
		showToast,
		showError,
		hideLoading
	} from '@/utils/toast';
	export default {
		data() {
			return {
				systemInfo: uni.getSystemInfoSync(),
				disabled: false, // 提交按钮禁用
				smsPopup: false, // 短信弹出层
				paymentStatus: "", // 下单状态 首次 绑定
				order_id: "", // 订单id

				activeTab: 'bank', // 默认选中银行卡

				// 银行卡支付字段
				bankCardNumber: '',
				cardHolderName: '',
				idCardNumber: '',
				phoneNumber: '',
				// 信用卡支付字段
				expiryYear: '',
				expiryMonth: '',
				cvv: '',
				// 短信验证码
				validateCode: ''
			};
		},
		onLoad(options) {
			// console.log(options);
			this.order_id = options.order_id;
		},
		methods: {
			// 用户首次下单 信用卡或者其他卡
			firstPayment() {
				// 验证银行卡支付表单
				if (!this.validateBankForm()) return;

				showLoading();
				this.disabled = true;

				const pathConfigs = {
					bank: {
						order_id: this.order_id, // 订单id
						realname: this.cardHolderName, // 姓名
						idCardNo: this.idCardNumber, // 身份证号
						cardNo: this.bankCardNumber, // 银行卡号
						phone: this.phoneNumber, // 预留手机号
						terminalType: "OTHER",
						terminalId: this.systemInfo.deviceId, //唯一标识
					},
					credit: {
						order_id: this.order_id, // 订单id
						realname: this.cardHolderName, // 姓名
						idCardNo: this.idCardNumber, // 身份证号
						cardNo: this.bankCardNumber, // 银行卡号
						phone: this.phoneNumber, // 预留手机号
						terminalType: "OTHER",
						terminalId: this.systemInfo.deviceId, //唯一标识
						year: this.expiryYear, // 信用卡有效期年份
						month: this.formatCreditCardMonth(this.expiryMonth), // 信用卡有效期月份
						cvv2: this.cvv, // 安全码
					}
				};
				const paths = pathConfigs[this.activeTab] || pathConfigs.bank; // 默认bank

				uni.$u.http.post('/kafu.helipay/quick_pay_first_pay_pre_order', paths).then(res => {
					hideLoading();
					this.disabled = false;
					if (res.code == 0) {
						uni.$u.toast(res.msg);
						return;
					}
					if (res.data.smsMsg != "成功") {
						uni.$u.toast(res.data.smsMsg);
						return;
					}
					// 获取短信验证码 打开弹窗
					this.paymentSMS();
					this.open();
				}).catch(err => {
					console.log(err)
				})
			},
			// 首次支付短信
			paymentSMS() {
				uni.$u.http.post("/kafu.helipay/quick_pay_first_pay_send_validate_code", {
					order_id: this.order_id, //  订单id
				}).then(res => {
					if (res.code == 0) {
						uni.$u.toast(res.msg);
						return;
					}
					uni.$u.toast("验证码已发送");
				}).catch(err => {
					console.log(err)
				})
			},

			// 确认支付
			confirmPayment() {
				if (!this.validateCode) {
					showToast('请输入验证码');
					return;
				}
				uni.$u.http.post("/kafu.helipay/quick_pay_first_pay_confirm_pay", {
					order_id: this.order_id, //  订单id
					validateCode: this.validateCode, // 短信验证码
				}).then(res => {
					if (res.code == 0) {
						uni.$u.toast(res.msg);
						return;
					}
					uni.$u.toast("支付成功");
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/index/materialRequisition/materialRequisition'
						})
					}, 1500)
				}).catch(err => {
					console.log(err)
				})
			},


			validateBankForm() {
				if (!this.cardHolderName) {
					showToast('请输入持卡人姓名');
					return false;
				}
				if (!this.idCardNumber) {
					showToast('请输入身份证号');
					return false;
				}
				if (!this.bankCardNumber) {
					showToast('请输入银行卡号');
					return false;
				}
				if (!this.phoneNumber) {
					showToast('请输入手机号');
					return false;
				}
				if (this.activeTab == "credit") {
					if (!this.expiryYear) {
						showToast('请输入有效期年份');
						return false;
					}
					if (!this.expiryMonth) {
						showToast('请输入有效期月份');
						return false;
					}
					if (!this.cvv) {
						showToast('请输入安全码');
						return false;
					}
				}
				return true;
			},

			open() {
				if (!this.phoneNumber) {
					showToast('请输入手机号');
					return false;
				}
				this.smsPopup = true;
			},
			close() {
				this.smsPopup = false;
			},
			// 顶部导航切换
			switchTab(tab) {
				this.activeTab = tab;
			},
			// 月份
			formatCreditCardMonth(month) {
				const num = parseInt(month, 10);
				if (isNaN(num) || num < 1 || num > 12) {
					return month; // 返回原始值让后续验证处理
				}
				return num < 10 ? `0${num}` : `${num}`;
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: #f5f5f5;
	}

	.hint {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		font-size: 16px;
		font-weight: 500;
		padding: 20px 0 0 0;
	}

	.hint p:nth-child(3) {
		font-weight: 550;
		padding-top: 10px;
	}
	.hint p:nth-child(4) {
		font-weight: 550;
	}

	.pop {
		width: 100%;
		height: 28vh;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.title {
		width: 96%;
		justify-content: space-between;
		font-size: 34rpx;
		font-weight: 550;
		padding: 12px;
	}

	.validateCode {
		padding: 6px;
	}

	.tip {
		font-size: 28rpx;
		color: #a9a9a9;
		margin: 20px 0;
	}

	.pop_input {
		width: 96%;
		text-align: center;
		border-bottom: 1px solid #a9a9a9;
		margin-top: 20px;
		padding: 8px 0;
	}

	.sure {
		width: 96%;
		text-align: center;
		background-color: #0056FF;
		color: #fff;
		border: none;
		border-radius: 4px;
		font-size: 16px;
		padding: 10px 0;
	}

	.textColor {
		color: #c2c2c2;
	}

	.payment-container {
		padding: 12px;
	}

	.tab-bar {
		display: flex;
		background-color: #fff;
		border-radius: 8px 8px 0 0;
		overflow: hidden;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 12px 0;
		color: #666;
		font-size: 16px;
		position: relative;
	}

	.tab-item.active {
		color: #0056FF;
		font-weight: bold;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 6px;
		left: 40%;
		right: 20%;
		width: 20%;
		height: 3px;
		background-color: #0056FF;
		border-radius: 3px;
	}

	.payment-form {
		background-color: #fff;
		padding: 10px 20px 20px 20px;
		border-radius: 0 0 8px 8px;
	}

	.form-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #e3e3e3;
		padding: 16px 0;
	}

	.form-item-column {
		display: flex;
		flex-direction: column;
	}

	.col {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #e3e3e3;
		padding: 16px 0;
	}

	.col input {
		width: 80px;
	}

	.form-item label {
		display: block;
		color: #333;
		font-size: 16px;
	}

	.form-item input {
		width: 70%;
		font-size: 16px;
		padding: 0 10px;
	}

	.form-item.row {
		display: flex;
		gap: 15px;
	}

	.form-item .col {
		flex: 1;
	}

	.submit-btn {
		width: 100%;
		background-color: #0056FF;
		color: #fff;
		border: none;
		border-radius: 4px;
		font-size: 16px;
		margin-top: 20px;
	}
</style>